/*
 * @Description: 发现列表卡片
 * @Author: kanglin
 * @Date: 2018-11-14 10:32:18
 * @Copyright: Created by Panxsoft.
 */
<style lang="less" scoped rel="stylesheet/less" type="text/less" >
    @import '~src/assets/css/common.less';
    @deep: ~">>>";
    .v-com-article-card{
        // height:468*@rem-per-px;
        background:#ffffff;
        padding: 32*@rem-per-px 40*@rem-per-px 28*@rem-per-px;

        .cover{
			// @see https://panxsoft.coding.net/p/Direwolf/task/227047
			@cover-width: (750 - (40*2))*@rem-per-px;
			height: @cover-width* (22/33);
			margin: 0 auto;
            background:rgba(149,149,149,1);
            border-radius:6*@rem-per-px;
            overflow: hidden;
            & > img{
                width: 100%;
                height: 100%;
            }
        }
        .title{
            height:96*@rem-per-px;
            font-size:32*@rem-per-px;
            font-weight:bold;
            line-height:45*@rem-per-px;
            margin-top: 16*@rem-per-px;
			text-align: justify;
			color: #232931;
			padding-bottom: 15*@rem-per-px;
			border-bottom: 1px solid #F6F6F6;
        }

        .info{
			display: flex;
            justify-content: space-between;
            padding-top: 16*@rem-per-px;
            height:28*@rem-per-px;
            color: #BBBDC0;
			font-size: 20*@rem-per-px;
        }

    }
</style>

<template>
	<div class="v-com-article-card">
		<div class="cover">
			<img
				v-lazy="cover"
				alt="">
		</div>
		<div class="title">
			{{ title }}
		</div>
		<p class="info">
			<span class="info__date">{{ date }}</span>
			<span class="info__count">{{ $t('article.read') + $t('common.colon') + count }}</span>
		</p>
	</div>
</template>

<script>
/**
* 发现列表卡片组件
* @vue-prop {string} [title=''] 文章标题
* @vue-prop {string} [date='']	文章时间
* @vue-prop {number} [count=0]	阅读量
* @vue-prop {string} cover	封面图片地址
*/
export default {
	name: 'ArticleCard',
	filters: {
	},
	props: {
		title: {
			type: String,
			default() {
				return '';
			},
		},
		date: {
			type: String,
			default() {
				return '';
			},
		},
		count: {
			type: Number,
			default() {
				return 0;
			},
		},
		cover: {
			type: String,
			default() {
				return null;
			},
		},
	},
	data() {
		return {};
	},
	methods: {},
};
</script>
